<template>
  <div class="cart">
    <!-- 导航栏 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      :right-text="flag ? '完成' : '编辑'"
      @click-right="flag = !flag"
      @click-left="$router.go(-1)"
      left-arrow
      fixed
      placeholder
    ></van-nav-bar>
    <!-- 空购物车列表 -->
    <van-empty
      v-show="cartList.length === 0"
      :description="token ? '购物车空开如也,' : '您还没登录,'"
    >
      <van-button
        round
        type="danger"
        :to="token ? address.home : address.login"
        class="bottom-button"
        >{{ token ? "去首页" : "去登录" }}</van-button
      >
    </van-empty>
    <!-- 列表 -->
    <van-checkbox-group class="cart-li" v-model="result" ref="checkboxGroup">
      <li class="flx-cent" v-for="item in cartList" :key="item.cartId">
        <van-checkbox
          :name="item.cartId"
          checked-color="#C03131"
        ></van-checkbox>
        <div class="fg1 flex">
          <div class="cart-goods">
            <img :src="item.imgUrl" alt />
          </div>
          <div class="cart-container flex2 jc-sb h100pc">
            <p class="goods-msg">{{ item.masterName }}</p>
            <div class="flex jc-sb aic" style="height: 28px">
              <span class="price">￥ {{ item.price | fMoney }} </span>
              <van-stepper
                v-if="flag"
                :value="item.buyNum"
                async-change
                @plus="changeBuyNum(item, 1)"
                @minus="changeBuyNum(item, -1)"
              />
              <span v-else class="f999 f12">x {{ item.buyNum }} </span>
            </div>
          </div>
        </div>
      </li>
    </van-checkbox-group>
    <!-- 结算 删除 -->
    <van-submit-bar
      :price="totalMoney"
      @submit="submit"
      :button-text="flag ? '删除' : '结算'"
    >
      <van-checkbox
        icon-size="20px"
        checked-color="#C03131"
        :value="result2"
        @click="checkAll"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import $http from "@/utils/request";
export default {
  //注册组件
  components: {
    Footer,
  },
  data() {
    return {
      result: [],
      cartList: [],
      flag: false,
      result: [],
      result2: false,
      address: {
        home: "/",
        login: "/account/login",
      },
    };
  },
  created() {
    this.getList();
  },
  watch: {
    result(newV, oldV) {
      if (this.result.length === this.cartList.length) {
        this.result2 = true;
      } else {
        this.result2 = false;
      }
    },
  },
  computed: {
    token() {
      return this.$store.state.token;
    },
    totalMoney() {
      let list = this.cartList.filter((cart) => {
        return this.result.includes(cart.cartId);
      });
      let sum = 0;
      list.forEach((item) => {
        let price = item.price * item.buyNum;
        sum += price;
      });
      return sum;
    },
  },
  methods: {
    submit() {
      if (this.flag) {
        let params = { cartId: this.result };
        this.$dialog
          .confirm({
            title: "温馨提示",
            message: "确认要删除吗？",
          })
          .then(() => {
            $http.post("/cart/del", params).then((res) => {
              let list = this.cartList.filter((cart) => {
                return !this.result.includes(cart.cartId);
              });
              this.cartList = list;
              this.$toast.success("删除成功");
              if (this.cartList.length === 0) {
                this.result2 = false;
              }
            });
          });
      } else {
        let params = {
          totalMoney: this.totalMoney,
          cartId: this.result,
        };
        $http.post("/preOrder/create", params).then((res) => {

            this.$router.push({
              path:"/order/verify",
              query:{
                preOrderId:res.result.preOrderId
              }
            });
        });
      }
    },
    checkAll() {
      this.result2 = !this.result2;
      if (this.result2) {
        //改头换面
        this.result = this.cartList.map((item) => item.cartId);
      } else {
        this.result = [];
      }
    },
    changeBuyNum(item, num) {
      let buyNum = item.buyNum + num;

      let data = {
        buyNum,
        cartId: item.cartId,
      };
      $http.post("/cart/updateNum", data).then((res) => {
        item.buyNum = buyNum;
      });
    },
    getList() {
      $http.get("cart/all").then((res) => {
        this.cartList = res.list;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "./index.less";
.cart {
  .van-submit-bar {
    bottom: 50px;
  }
  .cart-li {
    margin-bottom: 100px;
  }
}
</style>
